Como ficou definido no documento 4, os elementos html podem ser divididos nas seguintes classes :
1-ELEMENTOS BÁSICOS: <body>
2-ELEMENTOS DE METADADOS: <base><head><link><meta><style>
3-ELEMENTOS DE SEÇÕES DE CONTEÚDO: <address><article><aside> <footer> <header><h1> a <h6><hgroup><nav>
4-ELEMENTOS DE CONTEÚDOS EM TEXTO: <dd><dl><dt><div><figure> <figcaption><hr><li><main><ol><p><pre><ul>
5-ELEMENTOS DE TEXTO EM LINHA: <a><abbr><b><br><cite><code> <data><dfn><em><i><kbd><mark><q><s><samp> <small><span><strong><sub><sup><time><u><var>
6-ELEMENTOS DE IMAGEM E MULTIMÍDIA: <img><area><audio><map><track><video>
7-ELEMENTOS DE CONTEÚDOS EMBARCADOS :<embed><object><param><source>
8-ELEMENTOS DE SCRIPT: <canvas><noscript><script>
9-ELEMENTOS DE MARCAÇÃO DE EDIÇÃO: <del> <ins>
10-ELEMENTOS DE CONTEÚDOS EM TABELA: <caption><col><colgroup><table> <tbody><td><tfoot><th><thead><tr>
11-ELEMENTOS DE FORMULÁRIO: <button><datalist><fieldset><form><input> <label><legend><meter><optgroup><option><output><progress> <select><textarea>
12-ELEMENTOS INTERATIVOS: <details><menu><menuitem><summary>


Neste documento discutiremos a classe 4 - ELEMENTOS DE CONTEÚDOS EM TEXTO.


Note bem que em 4-ELEMENTOS DE CONTEÚDOS EM TEXTO temos tags de texto que são exibidas em blocos e em 5-ELEMENTOS DE TEXTO EM LINHA temos tags de texto que são exibidas em linha.
Neste documento falaremos apenas sobre a classe 4 : ELEMENTOS DE CONTEÚDOS EM TEXTO

1-<dl>, <dt> e <dd>

Estas tags são úteis para exibição de parágrafos em nível hierarquico onde dl é a tag agrupadora dos itens (dl=definition list), a tag dt é o tema ou titulo de um item (dt=data title) e a tag dd é uma explicação ou definição do tema ou titulo .
Os itens dentro da tag dt são exibidos em negrito no Google Chrome.
Feito para quando temos uma lista de termos e uma lista de descrições associadas a estes termos.

Exemplo:
<dl>
    <dt>Este é o titulo(dt).</dt>
    <dd>Esta é a descrição do titulo(dd).</dd>
</dl>

Seria exibido assim :
Este é o titulo(dt).
Esta é a descrição do titulo(dd).

Podemos observar que no chrome exibe o dt em negrito e o dd sem avançar o alinhamento à direita.
Mas alguns browsers exibem a tag dd alinhada mais a direita do que a tag dt.


2-<div>

A tag div junto com a css causou uma revolução na formatação de páginas fazendo com que o velho método de colocar tudo da página em tabelas para que ficasse alinhado, esteticamente organizado caisse em desuso rapidamente e não só pela simplicidade de uso mas pela flexibilidade e versatilidade do componente.
A div representa uma divisão, uma separação no documento corrente, ou seja, eu estou falando sobre algo e desejo mudar o assunto, iniciar coisa nova. É para isso que serve a tag div, separar conteúdos dentro da mesma página
Contudo, um dos maiores usos de div é agrupar conteúdos dentro de sí. Se, por exemplo, colocarmos um fundo colorido na div e adicionamos um monte de elementos dentro dela eles todos terão o fundo colorido. Muito utilizada também para alinhar esse 'agrupamento de itens' na página, ou seja, centralizar, posicionar, etc. Como a div é um elemento de bloco, ela segue a regra que se for o primeiro elemento na linha é exibido normalmente mas se já houver um elemento à esquerda a div será exibida no começo da linha seguinte. Outra regra sobre o elemento div-bloco é que a próxima tag renderizada depois da div será exibida na linha seguinte mesmo que haja espaço na linha corrente para exibir o elemento.

Exemplo de uma div : Neste exemplo quero escrever um texto com fundo azul claro (Importante : Lembre-se que a tag font em HTML5 caiu em desuso).

TestinhoAntes<div style="background-color:lightblue">Texto dentro da div</div>TestinhoDepois

Como é exibida pelo browser:
TestinhoAntes
Texto dentro da div
TestinhoDepois

Importante : Note que os textos são pequenos e todos poderiam ser exibidos na mesma linha mas a div funciona assim, acabou ocupando até um trecho da linha que o texto não usou.



3-<figcaption e><figure>

O Elemento HTML <figure> representa o conteúdo independente, frequentemente com uma legenda (<figcaption>), e é normalmente referido como uma única unidade. Enquanto ela está relacionada com o fluxo principal, sua posição é independente do fluxo principal.Normalmente, isso é uma imagem, uma ilustração, um diagrama, um trecho de código ou uma esquema que é referenciado no texto principal, mas que pode ser movido para outra página ou para um apêndice, sem afetar o fluxo principal.
Exemplo :

<figure>
    <img src="../imagens/paris.jpg" alt="A cidade Luz">
    <figcaption><i>fig. 1</i> - A cidade Luz mais bela que nunca</figcaption>
</figure>

Como o browser exibe:
A cidade Luz
fig. 1 - A cidade Luz mais bela que nunca



4-<hr>

A tag HR significa horizontal ruler e exibe uma linha horizontal na tela.
Até o html4 tinha os atributos align, color, noshade, size e width mas foram todos retirados no html5 e colocados na CSS.
Nesta página esta cheia de HRs em cada item exibido.



5-<ul>, <ol> e <li>

Estas tags trabalham com listas de itens. A lista de itens é um estilo que usamos quando queremos agrupar itens de mesma finalidade, por exemplo, eu tenho uma lista de estados federativos e quero exibí-la.
A tag ol significa ordered lista ou lista ordenada que nadas mais é uma lista com uma numeração ou cuja ordem dos elementos deve ser visível no documento.
A tal ul significa unordered list ou lista não ordenada e é uma lista sem a preocupação de contagem, quem vem antes ou depois, uma lista mais simples que a ol.
Já a tag li que significa list item ou item da lista é utilizada tanto na tag ol como na ul.
Abaixo temos alguns exemplos de listas:

Listas Ordenadas ou Númeradas (ol-ordered list)

  1. Primeira Linha
  2. Segunda Linha
  3. Terceira Linha
  4. Quarta Linha
  5. Quinta Linha
  6. Sexta Linha
  7. Sétima Linha
  8. Oitava Linha
  9. Nona Linha

Nas listas ordenadas podemos definir se queremos que a contagem seja numérica, alfabética ou até mesmo em algarismos romanos.

Lista Ordenada 2 com numeração alfabética maiúscula :


  1. Lista Ordenada - Item 1
  2. Lista Ordenada - Item 2
  3. Lista Ordenada - Item 3
  4. Lista Ordenada - Item 4
  5. Lista Ordenada - Item 5

Lista Ordenada 3 com numeração alfabética minúscula :


  1. Lista Ordenada - Item 1
  2. Lista Ordenada - Item 2
  3. Lista Ordenada - Item 3
  4. Lista Ordenada - Item 4
  5. Lista Ordenada - Item 5

Lista Ordenada 2 com numeração em algarismos romanos minúsculos :


  1. Lista Ordenada - Item 1
  2. Lista Ordenada - Item 2
  3. Lista Ordenada - Item 3
  4. Lista Ordenada - Item 4
  5. Lista Ordenada - Item 5

Lista Ordenada 2 com numeração em algarismos romanos maiúsculos :


  1. Lista Ordenada - Item 1
  2. Lista Ordenada - Item 2
  3. Lista Ordenada - Item 3
  4. Lista Ordenada - Item 4
  5. Lista Ordenada - Item 5

Lista ordenada contando de 100 em diante:

  1. primeiro item
  2. segundo item
  3. terceiro item
  4. quarto item
  5. quinto item

Listas Não Ordenadas (ul=unordered list)


Outro recurso interessante de identação é colocar uma lista dentro da outra para dar uma ideia de hierarquia de seus elementos.

Lista Não ordenada dentro de Lista Não ordenada:


Lista Não ordenada dentro de Lista ordenada:

  1. Primeiro item da lista
  2. Segundo item da lista:
    • Primeiro item da lista aninhada
    • Segundo item da lista aninhada
  3. Terceiro item da lista

Lista ordenada dentro de Lista Não ordenada:


As listas não ordenadas(ul) também são muito utilizadas para fazer menus em conjunto com a css e alguns macetes técnicos.




6-<main>

A tag <main> especifica o conteúdo principal de um documento.
O conteúdo dentro do elemento <main> deve ser exclusivo para o documento. Ele não deve conter nenhum conteúdo repetido em documentos como barras laterais, links de navegação, informações de direitos autorais, logotipos do site e formulários de pesquisa.
Nota: Não deve haver mais de um elemento <main> em um documento. O elemento <main> NÃO deve ser um descendente de um elemento <article>, <aside>, <footer>, <header> ou <nav>.

O elemento <main> define o conteúdo principal dentro do <body> em seu documento ou aplicação. Entende-se como conteúdo principal aquele relacionado diretamente com o tópico central da página ou com a funcionalidade central da aplicação. O mesmo deverá ser único na página, ou seja, dentro do elemento <main> não deverão ser incluidas seções da página que sejam comuns a todo o site ou aplicação, tais como mecanismos de navegação, informações de copyright, logotipo e campos de busca (a não ser, é claro, caso a função principal do documento seja fazer algum tipo de busca).

Exemplo :

<main>
  <h1>Web Browsers</h1>
  <p>Google Chrome, Firefox, Safari e o Edge são os browsers mais utilizados hoje em dia.</p>

  <article>
    <h1>Google Chrome</h1>
    <p>O Google Chrome é um navegador gratuito e de código aberto desenvolvido pelo Google, lançado em 2008.
  </article>

  <article>
    <h1>Edge ( sucessor do Internet Explorer )</h1>
    <p>O Internet Explorer é um navegador gratuito da Microsoft, lançado em 1995.</p>
  </article>

  <article>
    <h1>Mozilla Firefox</h1>
    <p>O Firefox é um navegador gratuito e de código aberto da Mozilla, lançado em 2004.</p>
  </article>
</main>


7-<p>

A tag p significa mudança de parágrafo e foi muito usada antigamente mas hoje foi substituída pela tag <br> e somente em ocasões especiais onde precisamos destacar o texto do resto do conteúdo da página usamos ela ( se bem que tem as tags H1 e H6 também com essa finalidade).
A tag p é uma tag de bloco, ou seja, se o local para sua exibição for no início da linha, sem problemas mas se houver uma vírgula já renderizada na mesma linha, a tag p será renderizada na linha seguinte. E como uma tag de bloco, irá ocupar toda a linha e a próxima tag será renderizada na linha logo abaixo.

Exemplo:
Temos aqui um texto comum seguido por uma tag p <p> e este texto esta dentro da tag p </p> e este texto esta escrito fora da tag p.


No brower é exibido assim :

Temos aqui um texto comum seguido por uma tag p

e este texto esta dentro da tag p

e este texto esta escrito fora da tag p.

8-<pre>

Esta tag faz com que o texto na página seja tratado pelo browser como se fosse um texto comum e não uma página html. Com isto, quebras de linhas e espaços serão exibidos como um texto no bloco de notas.
Exemplo :
<pre>
            Neste exemplo escrevi um texto e
            mudei de linha mas não com uma tag p ou br e sim um CRLF.
            Com esta tag o browser trata o texto como o bloco de notas faria.
</pre>


            Neste exemplo escrevi um texto e 
            mudei de linha mas não com uma tag p ou br e sim um CRLF.
            Com esta tag o browser trata o texto como o bloco de notas faria.

O texto acima esta escrito exatamente como num bloco de notas, sem tags nem espaçadores.